<template>
  <div>
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="客户订单号">
          <el-input v-model="formInline.orderId"></el-input>
        </el-form-item>
        <el-form-item label="客户名称">
          <el-input v-model="formInline.username"></el-input>
        </el-form-item>
<!--        <el-form-item label="签收日期">-->
<!--          <el-date-picker-->
<!--            v-model="formInline.receiptDate"-->
<!--            type="datetimerange"-->
<!--            range-separator="至"-->
<!--            start-placeholder="开始日期"-->
<!--            end-placeholder="结束日期">-->
<!--          </el-date-picker>-->
<!--        </el-form-item>-->
        <el-form-item>
          <el-button type="primary" @click="findall">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

<!--    对账明细-->
    <el-drawer size="50%"
      title="对账明细"
      :visible.sync="drawer"
      :direction="direction"
      >
      <span>
<!--        基本信息-->
    <el-descriptions class="margin-top" title="基本信息"  border>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-user"></i>
        订单编号
      </template>
      {{orderId}}
    </el-descriptions-item>

    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
        客户订单编号
      </template>
      {{nameid}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        客户名称
      </template>
      {{username}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
       签收时间
      </template>
      {{receiptDate}}
    </el-descriptions-item>

     <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
       支付方式：0-寄付，1-到付
      </template>
      {{payWay}}
    </el-descriptions-item>
  </el-descriptions>


        <br>
        <br>
        <br>
        <br>

<!--        结算信息-->
        <el-descriptions class="margin-top" title="结算信息"  border>
<!--    <el-descriptions-item>-->
<!--      <template slot="label">-->
<!--        <i class="el-icon-user"></i>-->
<!--        运算单件 (元/千克)-->
<!--      </template>-->
<!--      kooriookami-->
<!--    </el-descriptions-item>-->
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
        运算单价 (元/立方米)
      </template>
      {{price}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        运费合计(元)
      </template>
      {{tc}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-tickets"></i>
        提货费
      </template>
      {{pc}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
       装卸费
      </template>
      {{lo}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
       包装费
      </template>
      {{box}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
       保险费
      </template>
      {{sa}}
    </el-descriptions-item>
<!--     <el-descriptions-item>-->
<!--      <template slot="label">-->
<!--        <i class="el-icon-office-building"></i>-->
<!--       中转费-->
<!--      </template>-->
<!--      212-->
<!--    </el-descriptions-item>-->
     <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
       费用合计
      </template>
     {{to}}
    </el-descriptions-item>
  </el-descriptions>

        <br>
        <br>

        <el-descriptions class="margin-top" title="异常单"  border>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
        编号
      </template>
      {{orderId}}
    </el-descriptions-item>

    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
       发生时间
      </template>
      {{findTime}}
    </el-descriptions-item>

     <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
       赔偿金额
      </template>
     {{penalty}}
    </el-descriptions-item>
  </el-descriptions>
        <br>
        <br>
<!--        结尾-->

<!--        <div>&nbsp;应收总计:<el-input  style="width:150px;" placeholder=""></el-input>-->
<!--          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;预付款:<el-input  style="width:150px;" placeholder=""></el-input>-->
<!--           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;代收金额:<el-input  style="width:150px;" placeholder=""></el-input>-->
<!--        </div>-->
    <br>
    <br>
    <br>
   </span>
    </el-drawer>

<!--订单明细-->
    <el-drawer size="50%"
               title="订单明细"
               :visible.sync="dr"
               :direction="di"
               >
      <span>
<!--        基本信息-->
        <el-descriptions class="margin-top" title="订单信息"  border>

      <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
       订单来源
      </template>
      {{orderfrom}}
    </el-descriptions-item>



      <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
       运输类型
      </template>
      {{ trantype }}
    </el-descriptions-item>


      <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
       订单类型
      </template>
      {{ typename }}
    </el-descriptions-item>

    <el-descriptions-item>
      <template slot="label">
       接单日期
      </template>
      {{ receivetime }}
    </el-descriptions-item>

      <el-descriptions-item>
      <template slot="label">
       操作人
      </template>
      {{ admin }}
    </el-descriptions-item>

  </el-descriptions>


        <br>
        <br>
        <br>
        <br>

        <!--        提货地信息-->
        <el-descriptions class="margin-top" title="提货地信息" :column="3" border>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-user"></i>
        提货单位
      </template>
      {{ unit }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
        联系人
      </template>
      {{linkman}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        电话
      </template>
      {{ tel }}
    </el-descriptions-item>




     <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
       提货省份
      </template>
      {{ province }}
    </el-descriptions-item>

      <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
       提货城市
      </template>
      {{ city }}
    </el-descriptions-item>

     <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
       提货区
      </template>
      {{ district }}
    </el-descriptions-item>

    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
       详细地址
      </template>
      {{ fullAddress }}
    </el-descriptions-item>

  </el-descriptions>

        <br>
        <br>
        <br>
        <!--        收货信息-->
        <el-descriptions class="margin-top" title="收货信息" :column="3" border>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-user"></i>
        客户名称
      </template>
     {{ usernameee }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
        回单时间
      </template>
      {{ receiptDateee }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        预付款
      </template>
      {{ replacePayee }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-tickets"></i>
        代收金额
      </template>
      {{ totalCostee }}
    </el-descriptions-item>

    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
       应收总计
      </template>
      {{ totalCoste }}
    </el-descriptions-item>

    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
       回单状态
      </template>
      {{ receiptStatus }}
    </el-descriptions-item>
      <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
       回单说明
      </template>
      {{ receiptRemark }}
    </el-descriptions-item>


  </el-descriptions>
        <br>
        <br>

<!--        承运商信息-->
         <el-descriptions class="margin-top" title="承运商信息" :column="3" border>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-user"></i>
        承运商编号
      </template>
      {{ cariernum }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
        承运商名称
      </template>
      {{ carriername }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        所属机构
      </template>
      {{ company }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-tickets"></i>
        负责人
      </template>
      {{ headd }}
    </el-descriptions-item>

    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
       负责人手机号
      </template>
      {{ headphone }}
    </el-descriptions-item>

    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
       车辆总数
      </template>
      {{ cartotal }}
    </el-descriptions-item>

  </el-descriptions>
        <br>
        <br>
        <!--        结尾-->

        <!--        货物明细-->
        <el-descriptions class="margin-top" title="货物明细" :column="3" border>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-user"></i>
        货物名称
      </template>
      {{ goodsname }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
        数量
      </template>
      {{ numberse }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        单件重量(千克)
      </template>
      {{ weighte }}
    </el-descriptions-item>

     <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        总重量
      </template>
      {{ totalweight }}
    </el-descriptions-item>

    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-tickets"></i>
        长
      </template>
      {{ goodslong }}
    </el-descriptions-item>

    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
       宽
      </template>
      {{ goodswide }}
    </el-descriptions-item>

    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
       高
      </template>
      {{ goodshight }}
    </el-descriptions-item>
      <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
       单件体积
      </template>
      {{ bulke }}
    </el-descriptions-item>

     <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        总体积
      </template>
      {{ totalbulk }}
    </el-descriptions-item>

       <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
       包装类型 0-箱，1-袋子
      </template>
      {{ boxtype }}
    </el-descriptions-item>

      <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
       运输条件
      </template>
      {{ tranttype }}
    </el-descriptions-item>


  </el-descriptions>

    <br>
    <br>
   </span>
    </el-drawer>

<!--    按钮功能-->
    <div>
      <router-link to = "/home/receivable">
      <el-button type="primary"  >对账单</el-button>
      </router-link>
    </div>
    <br>
    <br>

<!--主页面展示-->
    <template>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="torderId.orderId"
          label="订单编号"
          width="100"
          align="center">
        </el-table-column>
        <el-table-column
          prop="torderId.username"
          label="客户名称"
          width="100"
          align="center">
        </el-table-column>
        <el-table-column
          prop="treceiptId.receiptDate"
          label="签收时间"
          width="100"
          align="center">
        </el-table-column>
        <el-table-column
          prop="tgoodsId.totalBulk"
          label="总体积"
          width="100"
          align="center">
        </el-table-column>
        <el-table-column
          prop="tgoodsId.totalWeight"
          label="总重量"
          width="100"
          align="center">
        </el-table-column>
        <el-table-column
          prop="tcostId.tranCost"
          label="运费总计"
          width="100"
          align="center">
        </el-table-column>
        <el-table-column
          prop="tcostId.totalCost"
          label="费用合计"
          width="100"
          align="center">
        </el-table-column>
        <el-table-column
          prop="tcostId.earlyPay"
          label="预付款"
          width="100"
          align="center">
        </el-table-column>
        <el-table-column
          prop="tcostId.replacePay"
          label="代收金额"
          width="100"
          align="center">
        </el-table-column>
        <el-table-column
          prop="tcostId.totalCost"
          label="应收总计"
          width="100"
          align="center">
        </el-table-column>
        //状态显示
        <el-table-column  align="center" label="状态" width="150" >
          <template slot-scope="scope" >
            <el-button  @click="state(scope.row)"  size="mini" type="primary" style="margin-left: 16px;">
              {{
                scope.row.state== 0
                  ? "已提交"
                  : scope.row.state== 1
                  ? "未提交"
                  :''
              }}
            </el-button>
          </template>
        </el-table-column>

        <el-table-column  align="center" label="操作" width="150">
          <template slot-scope="scope" >
          <el-button  @click="drawer=true,handleEdit(scope.row)" size="mini" type="primary" style="margin-left: 16px;">
            对账明细
          </el-button>
            <br>
            <br>
          <el-button @click="dr=true,handle(scope.row)" size="mini" type="primary" style="margin-left: 16px;">
            订单明细
          </el-button>

          </template>
        </el-table-column>



      </el-table>
    </template>





<!--    分页-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2,3,4]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>


  </div>
</template>

<script>
    export default {
      name: "FinancialHome",
      data(){
          return{
            //主页面展示
            tableData: [],
            Data:[],
            Datae:[],
            currentPage: 1,
            pageSize: 3,
            total: 0,
            radio: '1',
            //查询
            formInline: {
              orderId: '',
              username:'',
            },
            for: {
              state:'0',
            },
            //对账明细
            drawer: false,
            direction: 'rtl',

            orderId:'',
            username:'',
            receiptDate:'',
            payWay:'',
            nameid:'',
            //结算信息
            //运算单价
            price:'',
            tc:'',
            pc:'',
            lo:'',
            box:'',
            sa:'',
            to:'',
            penalty:'',
            findTime:'',
            //订单信息
            //订单来源
            orderfrom:'',
            //运输方式
            trantype:'',
            //订单类型
            typename:'',
            //接单日期
            receivetime:'',
            //操作人
            admin:'',
            //提货地信息
            city:'',
            district:'',
            fullAddress:'',
            linkman:'',
            province:'',
            tel:'',
            unit:'',
            //收货信息
            usernameee:'',
            earlyPayee:'',
            replacePayee:'',
            totalCostee:'',
            receiptDateee:'',
            totalCoste:'',
            receiptStatus:'',
            receiptRemark:'',
            //承运商信息
            cariernum:'',
            carriername:'',
            company:'',
            headd:'',
            headphone:'',
            cartotal:'',
            //货物明细
            goodsname:'',
            numberse:'',
            weighte:'',
            totalweight:'',
            goodslong:'',
            goodswide:'',
            goodshight:'',
            bulke:'',
            totalbulk:'',
            boxtype:'',
            tranttype:'',

            dr: false,
            di: 'rtl',
            multipleSelection: [],

          }
      },
      methods: {
        //订单明细
        handle(roww){

          //订单信息
          this.orderfrom=roww.tOrderbasicinfo.orderfrom;
          this.trantype=roww.tneed.tranType;
          this.typename=roww.tneed.typeName;
          this.receivetime=roww.tOrderbasicinfo.receiveTime;
          this.admin=roww.tOrderbasicinfo.admin;
          //提货地信息
          this.city=roww.taddrinfo.city;
          this.district=roww.taddrinfo.district;
          this.linkman=roww.taddrinfo.linkman;
          this.province=roww.taddrinfo.province;
          this.tel=roww.taddrinfo.tel;
          this.unit=roww.taddrinfo.unit;
          this.fullAddress=roww.taddrinfo.fullAddress;
          //收货信息
          this.usernameee=roww.torderId.username;//名字
          this.earlyPayee=roww.tcostId.earlyPay;//预付款
          this.replacePayee=roww.tcostId.replacePay;//预付款
          this.totalCostee=roww.tcostId.totalCost;//代收金额
          this.receiptDateee=roww.treceiptId.receiptDate;//时间
          this.totalCoste=roww.tcostId.totalCost;//应收总计
          this.receiptStatus=roww.treceiptId.receiptStatus;//回单状态
          this.receiptRemark=roww.treceiptId.receiptRemark;//回单说明
          //承运商信息
          this.cariernum=roww.tcarrier.carierNum;
          this.carriername=roww.tcarrier.carrierName;
          this.company=roww.tcarrier.company;
          this.headd=roww.tcarrier.head;
          this.headphone=roww.tcarrier.headPhone;
          this.cartotal=roww.tcarrier.carTotal;
          //货物明细
          this.goodsname=roww.tgoodsId.goodsName;
          this.numberse=roww.tgoodsId.number;
          this.weighte=roww.tgoodsId.weight;
          this.totalweight=roww.tgoodsId.totalWeight;
          this.goodslong=roww.tgoodsId.goodsLong;
          this.goodswide=roww.tgoodsId.goodsWide;
          this.goodshight=roww.tgoodsId.goodsHight;
          this.bulke=roww.tgoodsId.bulk;
          this.totalbulk=roww.tgoodsId.totalBulk;
          this.boxtype=roww.tgoodsId.boxType;
          this.tranttype=roww.torderId.tranType;


          console.log(roww)
        },
        //基本信息
        handleEdit(row) {
          this.findall();
          this.orderId=row.torderId.orderId;
          this.username=row.torderId.username;
          this.receiptDate=row.treceiptId.receiptDate;
          this.payWay=row.tcostId.payWay;
          this.nameid=row.tOrderbasicinfo.userOrderId;
          this.price=row.tprice.price;
          this.tc=row.tcostId.tranCost;
          this.pc=row.tcostId.pickCost;
          this.lo=row.tcostId.loadCost;
          this.box=row.tcostId.boxCost;
          this.sa=row.tcostId.safeCost;
          this.to=row.tcostId.totalCost;
          this.penalty=row.tExhandle.penalty;
          this.findTime=row.texception.findTime;

          this.findall();
          console.log(row)
        },
        handleSelectionChange(val) {
          this.multipleSelection = val;
        },
        // 页面大小的触发函数
        handleSizeChange(pageSize) {
          console.log(pageSize)
          //拿到当前的页面大小
          this.pageSize = pageSize;
          //重新加载 数据
          this.findall();
        },
        //当前页面变化触发的函数
        handleCurrentChange(currentPage) {
          console.log(currentPage)
          this.currentPage = currentPage;
          // 当前第几页发生了变化  重新加载数据
          this.findall();
        },
        //重置
        reset(){
          this.formInline.orderId = null,
            this.formInline.username = null,
            this.findall()
        },

        //页面展示
        findall() {
          this.$http({
            method: "GET",
            url: "http://localhost:8090/tFinance/tt",
            params: {
              currentPage: this.currentPage,
              pageSize: this.pageSize,
              orderId: this.formInline.orderId,
              username: this.formInline.username,
            }
          }).then(resp => {
            console.log("通知")
            console.log(resp)
            console.log(resp.data.data)
            this.tableData = resp.data.records,
            this.total = resp.data.total;
          })

        },
        //修改
        state(rowww){
          if(rowww.state==1){
            console.log(rowww)
            rowww.state=0
            this.$message.success("已提交")
            this.$http({
              method: "put",
              url: "http://localhost:8090/tFinance",
              params: {
                state: this.for.state,
              }
            })
          }
        }

      },


      created() {
        this.findall();
        this.handleEdit();
        this.handle();
      }
    }
</script>

<style scoped>

</style>
